<template>
    <div>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="childGetCateParamsList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    height="43vh"
                >
                    <el-table-column
                        type="expand"
                        width="55"
                    >
                        <template slot="header">
                            <el-tooltip content="添加参数" placement="left">
                                <el-button
                                    type="success"
                                    size="mini"
                                    icon="el-icon-plus"
                                    circle
                                    @click="checkAddCilck"
                                >
                                </el-button>
                            </el-tooltip>
                        </template>
                        <template v-slot="detailData">
                            <el-row
                                style="padding:0 10px"
                                type="flex"
                                justify="center"
                                align="middle"
                            >
                                <el-col>
                                    <el-tag
                                        v-for="(item,index) in detailData.row.attr_vals"
                                        :key="index"
                                        :type="index | chooseTagsColor"
                                        effect="plain"
                                        closable
                                        style="margin:10px"
                                        @close="handleClose(detailData.row,index)"
                                    >
                                        {{item}}
                                    </el-tag>
                                    <el-input
                                        class="input-new-tag"
                                        v-if="detailData.row.inputVisible"
                                        v-model="detailData.row.inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.native.enter="handleInputConfirm(detailData.row)"
                                        @blur="handleInputConfirm(detailData.row)"
                                        >
                                    </el-input>
                                    <el-button
                                        v-else
                                        class="button-new-tag"
                                        size="small"
                                        @click="showInput(detailData.row)"
                                        type="success"
                                    >
                                    添加
                                    <i class="el-icon-circle-plus-outline"></i>
                                    </el-button>
                                </el-col>
                                <el-col :pull="detailData.row.attr_vals.length == 0 ? 3 : 0" v-show="detailData.row.attr_vals.length == 0">
                                    <span>暂无商品动态参数项</span>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="序号"
                        type="index"
                        width="55"
                    >
                    </el-table-column>
                    <el-table-column
                        label="参数名称"
                        prop="attr_name"
                        min-width="160"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="60"
                    >
                        <template v-slot="data">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                size="mini"
                                @click="openEditParamsDialog(data.row)"
                            >
                            修改
                            </el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="mini"
                                @click="askDeleteParams(data.row.attr_id, data.row.attr_name)"
                            >
                            删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-dialog 
            title="新增商品参数"
            :visible.sync="dialogNewParamsVisible"
            width="32%"
            center
            @close="resetCloseNewParamsDialog"
        >
            <el-form
                :model="addCateParamsForm"
                :rules="addCateParamsFormRules"
                ref="addCateParamsFormRef"
                status-icon
                label-position="top"
            >
                <el-form-item label="商品参数名称" prop="newCateParam">
                    <el-row>
                        <el-col>
                            <el-input
                                placeholder="请输入新参数名称"
                                v-model="addCateParamsForm.newCateParam"
                                maxlength="10"
                                show-word-limit
                                @keyup.native.enter="pushAddNewParamsDialog"
                            >
                            </el-input>                            
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="newFormButton">
                    <el-button type="primary" size="small" @click="pushAddNewParamsDialog">提 交</el-button>
                    <el-button type="info" size="small" @click="resetCloseNewParamsDialog(false)">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog 
            title="修改商品参数"
            :visible.sync="dialogEditParamsVisible"
            width="32%"
            center
            @close="resetCloseEditParamsDialog"
        >
            <el-form
                :model="editCateParamsForm"
                :rules="editCateParamsFormRules"
                ref="editCateParamsFormRef"
                status-icon 
                label-position="top"
            >
                <el-form-item>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-discount"></i>
                                    当前参数名称
                            </template>
                            {{beforEditName}}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <el-form-item label="修改商品参数名称" prop="editCateParam">
                    <el-row>
                        <el-col>
                            <el-input
                                placeholder="请输入修改后的参数名称"
                                v-model="editCateParamsForm.editCateParam"
                                maxlength="10"
                                show-word-limit
                                @keyup.native.enter="pushEditParamsDialog"
                            >
                            </el-input>                            
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="newFormButton">
                    <el-button type="primary" size="small" @click="pushEditParamsDialog">提 交</el-button>
                    <el-button type="info" size="small" @click="resetCloseEditParamsDialog(false)">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default({
    name:'paramsdynamic',
    props:{
        'childGetCateParamsList':{
            type:Array,
            required:false,
        },
        'childCateParamsID':{
            required: true,
        }
    },
    data(){
        return {
            dialogNewParamsVisible: false,
            addCateParamsForm:{
                newCateParam:''
            },
            dialogEditParamsVisible: false,
            beforEditName:'',
            beforEditID:'',
            editCateParamsForm:{
                editCateParam:''
            },
            addCateParamsFormRules:{
                newCateParam:[
                    {
                        required: true,
                        message: '商品参数新名称不能为空！',
                        trigger: 'blur'
                    },
                    {
                        max: 10,
                        message: '商品参数新名称过长！',
                        trigger: 'blur'
                    }
                ]
            },
            editCateParamsFormRules:{
                editCateParam:[
                    {
                        required: true,
                        message: '商品参数名称不能为空！',
                        trigger: 'blur'
                    },
                    {
                        max: 10,
                        message: '商品参数名称过长！',
                        trigger: 'blur'
                    }
                ]
            },
        }
    },
    methods: {
        checkAddCilck(){
            this.openNewParamsDialog()
        },
        openNewParamsDialog(){
            this.dialogNewParamsVisible = true;
        },
        resetCloseNewParamsDialog(flag){
            if(flag){
                this.dialogNewParamsVisible = false;
            }
            this.$refs.addCateParamsFormRef.resetFields();
        },
        pushAddNewParamsDialog(){
            this.$refs.addCateParamsFormRef.validate(async valid =>{
                if(valid){
                    const {data: res } = await this.$http.post(`categories/${this.childCateParamsID}/attributes`,
                        {
                            attr_name: this.addCateParamsForm.newCateParam,
                            attr_sel:'many'
                        }
                    );
                    if(res.meta.status == 201){
                        this.$emit('reFreshTable');
                        this.resetCloseNewParamsDialog(true);
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '添加新商品参数成功！'
                            }
                        )
                    }else{
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'error',
                                duration:2000,
                                message: res.meta.msg
                            }
                        )
                    }
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写商品参数信息！'
                        }
                    )
                }
            })
        },
        openEditParamsDialog(value){
            this.dialogEditParamsVisible = true;
            this.beforEditName = value.attr_name;
            this.beforEditID = value.attr_id;
        },
        resetCloseEditParamsDialog(flag){
            if(flag){
                this.dialogEditParamsVisible = false;
            }
            this.$refs.editCateParamsFormRef.resetFields();
        },
        pushEditParamsDialog(){
            this.$refs.editCateParamsFormRef.validate(async valid =>{
                if(valid){
                    const {data: res } = await this.$http.put(`categories/${this.childCateParamsID}/attributes/${this.beforEditID}`,
                        {
                            attr_name: this.editCateParamsForm.editCateParam,
                            attr_sel:'many'
                        }
                    );
                    if(res.meta.status == 200){
                        this.$emit('reFreshTable');
                        this.resetCloseEditParamsDialog(true);
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'success',
                                duration:2000,
                                message: '修改商品参数成功！'
                            }
                        )
                    }else{
                        return this.$message(
                            {
                                center:true,
                                showClose: true,
                                type: 'error',
                                duration:2000,
                                message: res.meta.msg
                            }
                        )
                    }
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '请填写商品参数信息！'
                        }
                    )
                }
            })
        },
        askDeleteParams(value1,value2){
            this.$confirm('<span style="color:red;font-weight:bold">注：删除操作不可逆！</span>'+'<br/>'+'请确认是否删除'+'<br/>'+'动态参数 '+value2,'删除动态参数提示', {
                confirmButtonText: '删除',
                cancelButtonText: '返回',
                type: 'warning',
                dangerouslyUseHTMLString: true
            }).then(() => {
                this.deleteParams(value1,value2);
            this.$message({
                center:true,
                showClose: true,
                type: 'success',
                duration:2000,
                message: '开始执行删除动态参数 '+value2
            });
            }).catch(() => {
                this.$message({
                    center:true,
                    showClose: true,
                    duration:2000,
                    message: '取消删除动态参数 '+value2
                })
            });
        },
        async deleteParams(value1,value2){
            const { data: res} = await this.$http.delete(`categories/${this.childCateParamsID}/attributes/${value1}`)
            if(res.meta.status == 200){
                this.$emit('reFreshTable');
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '删除动态参数 '+value2+' 成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '删除动态参数 '+value2+' 失败！'
                    }
                )
            }
        },
        showInput(value) {
            value.inputVisible = true;
            //点击添加按钮时同时让输入框自动获得焦点
            //$nextTick:当页面元素被重新渲染后执行指定回调函数中的代码
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm(value) {
            if(value.inputValue.trim().length == 0){
                value.inputVisible = false;
                value.inputValue = '';
                return
            }else{
                value.attr_vals.push(value.inputValue.trim());
                value.inputVisible = false;
                value.inputValue = '';
                this.pushCateDetailParams(value,true);
                return
            }
        },
        async pushCateDetailParams(value,flag){
            var actionName =''
            if(flag){
                actionName = '添加'
            }else{
                actionName = '删除'
            }
            const {data: res } = await this.$http.put(`categories/${this.childCateParamsID}/attributes/${value.attr_id}`,
                {
                    attr_name: value.attr_name,
                    attr_sel:'many',
                    attr_vals: value.attr_vals.join(','),
                }
            );
            if(res.meta.status == 200){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: actionName+'商品参数项成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: res.meta.msg
                    }
                )
            }
        },
        handleClose(value,index){
            value.attr_vals.splice(index,1);
            this.pushCateDetailParams(value,false);
        }
    },
    filters:{
        chooseTagsColor(value){
            switch(value%3){
                case 0:
                    return ''
                break;
                case 1:
                    return 'success'
                break;
                case 2:
                    return 'danger'
                break;
            }
        }
    }
})
</script>

<style lang="less"scoped>
    .newFormButton{
        text-align: right;
        margin:0;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 80px;
        margin-left: 10px;
    }
</style>